<template>
	<view class="videoPlayer">
		<video  
		id="myVideo"
		class="video" 
		:controls="false" 
		:loop="true" 
		:autoplay="autoplay"
		:src=" 'http://124.221.26.166:8080/videos/video/'+video.src " 
		@click="click"
		custom-cache="false"
		></video>
		
		<!-- {{video.id}}
		{{video.author}} -->
	</view>
</template>

<script>
	var timer=null
	export default {
		// 接收来自videoList组件的video,index数据
		props:['video','index'],
		name:"videoPlayer",
		data() {
			return {
				play:false,
				dblClick:false,
				autoplay:false
			};
		},
		onReady() {
			this.videoContext=uni.createVideoContext('myVideo',this)
		},
		methods:{
			// 视频点击事件
			click(){
				// console.log("点击")
				clearTimeout(timer)
				this.dblClick=!this.dblClick
				timer=setTimeout(()=>{
					if(this.dblClick){
						//单机事件：如果视频没有播放，就播放，否则就暂停
						if(this.play===false){
							this.playThis()
						}else{
							this.pause()
						}
					}else{
						//双击事件
						// console.log("双击事件")
						this.$emit('changeClick')
					}
					this.dblClick=false
				},300)
				
			},
			// 视频播放
			player(){
				if(this.play===false){
					// console.log("播放")
					//暂停过的视频从头播放
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play=true
				}
				
			},
			// 视频暂停
			pause(){
				if(this.play===true){
					// console.log("暂停")
					this.videoContext.pause()
					// 设置状态(暂停)
					this.play=false
				}
				
			},
			// 当前视频暂停与播放之间的切换
			playThis(){
				if(this.play===false){
					// console.log("播放")
					this.videoContext.play()
					//设置状态(播放)
					this.play=true
				}
			},
			atuo(){
				if(this.index===0){
					this.autoplay=true
					this.play=true
				}
			}
		},
		created(){
			// console.log(this.index) //0到10
			this.atuo()
		},
		watch:{
			video(){
				// console.log(this.video)
			}
		}
	}
</script>

<style>
	.videoPlayer{
		height: 100%;
		width: 100%;
	}
	.video{
		height: 100%;
		width: 100%;
	}

</style>